<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <title>首页</title>
        <style>
            *{
                margin:0px;
                padding:0px;
            }
            .header{
                width:100%;
                height: 40px;
                background: darkred;
            }
            .content{
                width:100%;
            }
            .content-left{
                width: 15%;
                float:left;
                border: 1px solid red;
            }
            .content-right{
                width: 80%;
                float:left;
            }
            .content-right-src{
                width:100%;
                height: 100%;
                display: block;
            }

            .content-left dl,dt,dd{
                cursor: pointer;
            }
            .content-left dl{
                padding-left: 10px;
                margin-top: 5px;
            }
            .content-left dd{
                margin-left: 10px;
                display: none;
            }
        </style>


    </head>
    <body>
        <div class="header"></div>
        <div class="content">
            <div class="content-left">
                <dl>
                    <dt class="list-title">商品</dt>
                    <dd><a href="http://localhost:8080" target="myIfame">商品列表</a></dd>
                    <dd>商品添加</dd>
                </dl>
                <dl>
                    <dt class="list-title">订单</dt>
                    <dd>订单列表</dd>
                </dl>
                <dl>
                    <dt class="list-title">用户</dt>
                    <dd>用户列表</dd>
                </dl>
                <dl>
                    <dt class="list-title">报表</dt>
                    <dd>报表列表</dd>
                </dl>
            </div>
            <div class="content-right">
                <!--
                    动态加载出iframe
                -->
            </div>
        </div>
        <div class="bottom"></div>

        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.content-right').append('<iframe class="content-right-src" name="myIfame" src="http://www.baidu.com" />');
                $('.list-title').click(function(){
                    var ddlist = $(this).nextAll("dd");
                    var ddindex = $(ddlist[0]);
                    if('none'==ddindex.css('display')){
                        for(var i=0;i<ddlist.length;i++){
                            $(ddlist[i]).css('display','block');
                        }
                    }else{
                        for(var i=0;i<ddlist.length;i++){
                            $(ddlist[i]).css('display','none');
                        }
                    }
                })
            });
        </script>
    </body>
</html>
